<template>
  <div class="physics-facility">
    <div id="box">
      <div
        id="left"
        :style="{ width: detailWidth + 'px' }"
      >
        <LeftTool
          :plan-id="planId"
          :local-config="localConfig"
          :is-check="isCheck"
          :check-id="checkId"
          :select-data="selectData"
          :select-flag="selectFlag"
          :change-imagedata="changeImagedata"
          :map-click="mapClick"
          @select-item="onResSelect"
          @form-data="formData"
          @high-over="ckearCheck"
        />
      </div>
      <div id="resize" />
      <div
        id="right"
        :style="{ width: `calc(100% - ${detailWidth}px` }"
      >
        <MainMap
          :plan-id="planId"
          :res-id="resId"
          :local-config="localConfig"
          :useraccount="useraccount"
          :active-id="activeId"
          :search-array="leftData"
          :active-name="activeName"
          @change-image="changeImage"
          @map-click="onMapClick"
          @select-item="onSelectItem"
        />
      </div>
    </div>

    <!-- <el-container class="container">
      <el-aside
        width="260px"
        class="aside"
      >

      </el-aside>
      <el-main class="main">

      </el-main>
    </el-container> -->
  </div>
</template>

<script>
import LeftTool from './components/left-tool/LeftTool.vue';
import MainMap from './components/main-map/MainMap.vue';

export default {
  name: 'PhysicsFacility',
  components: {
    LeftTool,
    MainMap,
  },
  props: {
    planId: {
      type: String,
      default: '',
    },
    localConfig: {
      type: Object,
      default: () => {},
    },
    activeId: {
      type: String,
      default: '',
    },
    activeName: {
      type: String,
      default: '',
    },
    useraccount: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      resId: '',
      detailWidth: 300,
      changeImagedata: true,
      isCheck: 2,
      checkId: '',
      mapClick: {},
      leftData: [],
      selectData: {},
      selectFlag: true,
    };
  },
  mounted() {
    this.dragControllerDiv();
  },
  methods: {
    // 左侧树点击返回事件
    onResSelect(id) {
      this.resId = id;
      // this.$emit('select-item', id);
    },
    // 地图点击返回
    changeImage(id, isCheck) {
      this.changeImagedata = !this.changeImagedata;
      this.isCheck = isCheck;
      this.checkId = id;
    },
    // 左侧树数据
    formData(dataObj) {
      this.getAllRes(dataObj);
      this.$emit('form-data', dataObj);
    },
    onSelectItem(obj) {
      this.selectFlag = !this.selectFlag;
      this.selectData = obj;
    },
    // 获取所有资源信息
    getAllRes(data) {
      this.leftData = [];
      if (data.guanglanxitong) {
        this.leftData = this.leftData.concat(data.guanglanxitong);
        let pointArray = [];
        data.guanglanxitong.forEach((res) => {
          if (res.point) {
            pointArray = pointArray.concat(res.point);
          }
        });
        this.leftData = this.leftData.concat(pointArray);
      }
      if (data.guandaoxitong) {
        this.leftData = this.leftData.concat(data.guandaoxitong);
        let pointArray = [];
        data.guandaoxitong.forEach((res) => {
          if (res.point) {
            pointArray = pointArray.concat(res.point);
          }
        });
        this.leftData = this.leftData.concat(pointArray);
      }
      if (data.ganluxitong) {
        this.leftData = this.leftData.concat(data.ganluxitong);
        let pointArray = [];
        data.ganluxitong.forEach((res) => {
          if (res.point) {
            pointArray = pointArray.concat(res.point);
          }
        });
        this.leftData = this.leftData.concat(pointArray);
      }
      if (data.zhimaixitong) {
        this.leftData = this.leftData.concat(data.zhimaixitong);
        let pointArray = [];
        data.zhimaixitong.forEach((res) => {
          if (res.point) {
            pointArray = pointArray.concat(res.point);
          }
        });
        this.leftData = this.leftData.concat(pointArray);
      }
      if (data.yinshangxitong) {
        this.leftData = this.leftData.concat(data.yinshangxitong);
        let pointArray = [];
        data.yinshangxitong.forEach((res) => {
          if (res.point) {
            pointArray = pointArray.concat(res.point);
          }
        });
        this.leftData = this.leftData.concat(pointArray);
      }
      if (data.guaqiangxitong) {
        this.leftData = this.leftData.concat(data.guaqiangxitong);
        let pointArray = [];
        data.guaqiangxitong.forEach((res) => {
          if (res.point) {
            pointArray = pointArray.concat(res.point);
          }
        });
        this.leftData = this.leftData.concat(pointArray);
      }
      if (data.other) {
        this.leftData = this.leftData.concat(data.other);
        let pointArray = [];
        data.other.forEach((res) => {
          if (res.point) {
            pointArray = pointArray.concat(res.point);
          }
        });
        this.leftData = this.leftData.concat(pointArray);
      }
      const array = this.arrayNonRepeatfy(this.leftData);
      console.log('前', this.leftData.length);
      console.log('后', array.length);
      this.leftData = array;
    },
    arrayNonRepeatfy(arr) {
      const map = new Map();
      const array = []; // 数组用于返回结果
      for (let i = 0; i < arr.length; i += 1) {
        if (map.has(arr[i].id)) { // 如果有该key值
          map.set(arr[i].id, true);
        } else {
          map.set(arr[i].id, false); // 如果没有该key值
          array.push(arr[i]);
        }
      }
      return array;
    },
    // 地图资源点击
    onMapClick(obj) {
      console.log('------obj------', obj);
      this.mapClick = obj;
    },
    //
    ckearCheck() {
      this.isCheck = 2;
    },
    dragControllerDiv() {
      // 保留this引用
      const data = this;
      const resize = document.getElementById('resize');
      resize.onmousedown = function down(e) {
        // 颜色改变提醒
        resize.style.background = '#818181';
        let startX = e.clientX;
        resize.left = resize.offsetLeft;
        document.onmousemove = function move(e1) {
          // 计算并应用位移量
          const endX = e1.clientX;
          const moveLen = endX - startX;
          startX = endX;
          data.detailWidth += moveLen;
        };
        document.onmouseup = function up() {
          // 颜色恢复
          resize.style.background = '';
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    },
  },
};
</script>

<style lang="scss" scoped>
  .physics-facility {
    height: 100%;
    .container {
      height: 100%;
      .main {
        padding: 0;
      }
    }
  }
#box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
}
.top {
  width: 100%;
  height: 80px;
}
#left {
  height: 100%;
}

#resize {
  width: 5px;
  height: 100%;
  cursor: w-resize;
}

#right {
  height: 100%;
  // flex: 1;
}

</style>
